<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-col group_1">
				<text class="text_1">*仅适用于自助验收的用户，付费用户不需要参考使用。</text>
				<view class="flex-col group_2">
					<view class="flex-col section_1">
						<view class="justify-between section_2">
							<text class="text_2">我的房屋信息</text>
							<image :src="imgUrl+'16557867932504125179.png'" class="image_1"
								@click="go('/pages/index/editHourse?id='+projectId)" />
						</view>
						<view class="flex-col group_3">
							<view class="justify-between">
								<text class="text_3">房屋位置</text>
								<text class="text_4">{{address}}</text>
							</view>
							<view class="flex-col group_5">
								<view class="justify-between">
									<text class="text_5">房屋面积</text>
									<text class="text_6">{{roomArea}}m²</text>
								</view>
								<view class="justify-between group_7">
									<text class="text_7">房屋类型</text>
									<text class="text_8">{{roomTypeName}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="flex-col section_3">
						<view class="flex-row">
							<image :src="imgUrl+'16557867940327051981.png'" class="image_2" />
							<text class="text_9">验收固定表格</text>
						</view>
						<view class="flex-col group_9">
							<uni-table border emptyText="暂无更多数据">
								<!-- 表头行 -->
								<uni-tr style="background: rgba(29,106,255,0.0600);">
									<uni-th align="center">验收类目</uni-th>
									<uni-th align="center">验收提示</uni-th>
									<uni-th align="center">操作</uni-th>
								</uni-tr>
								<!-- 表格数据行 -->
								<uni-tr style="background-color: #ffffff;" v-for="(item,index) in list " :key="index">
									<uni-td align="center" width="80">{{item.acceptanceTypeName}}</uni-td>
									<uni-td>
										<view class="u-flex u-flex-col">
											<view class="u-flex-1  check1">
												<text class="text_16">{{item.acceptanceContent}}</text>
											</view>
											<view class="u-flex-1 check2">
												<text class="text_16">{{item.acceptanceTechnique}}</text>
											</view>

										</view>

									</uni-td>
									<uni-td align="center" width="80">
										<text class="check"
											@click="check(index)" v-if="item.id===null && item.acceptanceFlag===null"> {{'验收'}}</text>
											<text class="check" v-else
													@click="check(index)">{{item.acceptanceFlag===0?'合格':'不合格'}}</text>
									</uni-td>
								</uni-tr>

							</uni-table>
						</view>
					</view>
				</view>
			</view>

			<view class="flex-col items-center button" @click="saveSubmit()"><text class="text_31">保存报告</text></view>
		</view>
		<u-modal :show="show" :showConfirmButton="false" :show-title="false">
			<view class="u-flex u-flex-col  w-full u-p-20  u-relative">
				<view class="u-flex u-col-top u-row-center">
					<text class="font-500">验收</text>
					<u-icon class="close" name="close" @click="show=false"></u-icon>
				</view>

				<u--form style="width: 100%;height: 100%;padding:16rpx 30rpx;" labelWidth="100" labelPosition="left"
					:model="form" ref="form1">
					<u-form-item label="校验" prop="form.type" ref="item1">
						<view class="u-flex-col">
							<u-radio-group v-model="form.acceptanceFlag" size="30">
								<u-radio labelSize="30" iconSize="30" :customStyle="{marginRight: '16px'}"
									v-for="(item, index) in radiolist1" :key="index" :label="item.name"
									:name="item.value" :value="item.value">
								</u-radio>
							</u-radio-group>

						</view>

					</u-form-item>
					<u-form-item>
						<view class="u-flex-col">
							<text>备注</text>
							<textarea v-model="form.acceptanceRemark" class="u-m-t-10  remark" placeholder="请输入备注" />
						</view>
					</u-form-item>
					<u-form-item>
						<view class="confirm" @click="checks">
							<text>确认</text>
						</view>
					</u-form-item>
				</u--form>

				<view>

				</view>
			</view>
		</u-modal>
		<shop-check-login></shop-check-login>
	</view>
</template>

<script>
	import _ from 'lodash'
	import {
		mapGetters
	} from 'vuex'
	export default {
		components: {},
		data() {
			return {
				//验收
				list: [],
                imgUrl:this.$IMG_URL,
				home: {
					id: "",
					acceptanceConfigId: "", //类目ID
					acceptanceFlag: "", //是否验收通过 1通过 0不通过
					acceptanceRemark: "",
					acceptanceTypeName: "", //验收类目
					acceptanceContent: "", //验收内容
					acceptanceTechnique: "", //验收手法
				},
				//房屋信息
				roomTypeName: '',
				roomArea: '',
				district: '',
				address: '',
				projectId: '',
				index: -1,
				show: false,
				form: {
					id: 0,
					projectId: '', //房屋id
					acceptanceFlag: '', //是否验收通过 1通过 0不通过
					acceptanceRemark: '', //验收备注
					acceptanceConfigId: '', //类目ID
					projectId: '',
				},
				forms: [],
				radiolist1: [{
						name: '合格',
						value: 0
					},
					{
						name: '不合格',
						value: 1
					}
				],
			}

		},
		onShow() {
			this.$store.dispatch('checkHouse');	 	
			
		},
		created() {
			this.getyanshou()
			// this.conmments() //全屋验收 表格内容
			this.queryHousing() //房屋信息 
			this.queryCommentsReport() //验收表单
		},
		computed:{
			...mapGetters(['token'])
		},
		methods: {
			getyanshou(){
				 console.log();
				this.$http('queryComment.yanshou',{
				token:this.token
				}).then(res=>{
					console.log(res);
					this.list = res.data
				})
			},
			check(index) {
				this.show = true;
				this.form = {};
				let item = this.list[index];
				this.form.id = item.id;
				this.form.acceptanceConfigId = item.acceptanceConfigId;
				this.form.acceptanceRemark = item.acceptanceRemark;
				this.form.projectId = this.projectId;
				this.form.acceptanceFlag = item.acceptanceFlag;
				this.index = index;


			},
			// conmments() {
			// 	this.$http('queryComments.conmments').then(r => {
			// 		if (r.code == 200) {
			// 			this.acceptanceTypeName = r.data.acceptanceTypeName //验收类目
			// 			this.acceptanceContent = r.data.acceptanceContent //验收内容
			// 			this.acceptanceTechnique = r.data.acceptanceTechnique //验收手法
			// 			this.list = r.data;
			// 			this.list.map(item=>{
			// 				let arr=[];
			// 				if(item.id)
			// 				{
			// 					arr.push({
			// 						acceptanceConfigId: item.acceptanceConfigId,
			// 						acceptanceFlag: item.acceptanceFlag,
			// 						acceptanceRemark:item.acceptanceRemark,
			// 						id: item.id,
			// 						projectId: item.projectId,
			// 					})
			// 					this.forms=arr;
			// 				}
			// 			})
			// 		   // this.forms=this.list;

			// 		} else {
			// 			// this.$u.toast(r.msg);
			// 		}
			// 	});
			// },

			queryHousing() {
				this.$http('inspectionFrequency.queryHousing').then(r => { //房屋信息
					if (r.code == 200) {
						this.roomTypeName = r.data.project.roomTypeName
						this.roomArea = r.data.project.roomArea
						this.district = r.data.project.district
						this.address = r.data.project.provinceName + ' ' + r.data.project.cityName + ' ' +
							r.data.project.districtName + ' ' + r.data.project.position
						this.projectId = r.data.project.projectId
						// console.log("id是:" + r.data.project.projectId);
						//房屋信息查询成功 则传projectId值 给queryComments
					    this.getConmments(r.data.project.projectId);
					
						
					}
				});
			},
			getConmments(e) {
				this.$http('queryComments.conmments', { //固定表格内容
					projectId: this.projectId
				}).then(r => {
					console.log("getConmments" + e)
					if (r.code == 200) {} else {
						console.log(r.msg);
					}
				});
			},
			queryCommentsReport() {
				this.$http('queryCommentsReport.queryCommentsReport', { //固定表格内容
				}).then(r => {
					if (r.code == 200) {} else {
						console.log(r.msg);
					}
				});
			},
			checks() {

				if (this.index != -1) {
					let item = this.list[this.index];
					item.acceptanceFlag = this.form.acceptanceFlag;
					item.projectId = this.form.projectId;
					item.acceptanceRemark = this.form.acceptanceRemark;
					this.$set(this.list, this.index, item);
					this.$set(this.forms, this.index, this.form);
					console.log(this.forms);
					this.show = false;

				}
			},
			saveSubmit() { //保存报告
				console.log(this.forms);
				if (this.forms.length == 0) {
				    this.$u.toast('请至少验收一项，再保存报告');
					return;
				} else {
					this.$http('inspectionFrequency.saveComments', this.forms).then(r => {
						if (r.code == 200) {
							this.go('/pages/tool/saveOK');
						} else {
							this.$u.toast(r.msg);
						}
					});
				}
			},
		},
	};
</script>

<style scoped lang="scss">
	
	uni-textarea {
		width: 280px;
	}
	/deep/ .uni-table-td table--border {
		line-height: 160rpx;
	}
	::v-deep .uni-table-td {
		padding: 0;
		color: #333333;
		font-size: 24rpx;
	} 

	::v-deep .u-modal__content {
		padding: 0 !important;
	}

	.confirm {
		width: 100%;
		height: 72rpx;
		background: #1A76F2;
		border-radius: 36rpx;
		opacity: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;

		font-weight: 400;
		color: #FFFFFF;
	}

	.remark {
		background-color: #F6F7F9;
		border-radius: 16rpx;
		box-sizing: border-box;
		padding: 20rpx;
	}

	.close {
		position: absolute;
		right: 20rpx; 
		top: 20rpx;
	}

	.check {
		font-size: 24rpx;
		width: 100%;
		height: 180rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-weight: 500;
		color: #1D6AFF;
	}

	.check1 {
		padding: 10rpx;

		background-color: #ffffff;
	}

	.text_16 {

		font-size: 22rpx;
		font-weight: 500;
		color: #333333;
	}

	.check2 {
		width: 100%;
		text-align: center;
		padding: 10rpx;
		background: rgba(29, 106, 255, 0.0600);
	}

	.text_12 {
		align-self: center;
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
		width: 313rpx;
	}

	.text-wrapper {
		padding: 24rpx 0 32rpx;
		background-color: #1d6aff0f;
	}

	.text_15 {
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		padding: 0 24rpx 48rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.group_1 {
		padding: 29rpx 0 48rpx;
	}

	.button {
		margin: 0 8rpx;
		padding: 24rpx 31rpx;
		background-color: #1d6aff;
		border-radius: 44rpx;
	}

	.text_1 {
		margin-left: 8rpx;
		align-self: flex-start;
		color: #ff371d;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_2 {
		margin-top: 32rpx;
	}

	.text_31 {
		color: #ffffff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.section_1 {
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_3 {
		margin-top: 21rpx;
		padding: 30rpx 24rpx 40rpx;
		background-color: #ffffff;
		border-radius: 16rpx;
	}

	.section_2 {
		padding: 29rpx 24rpx 31rpx;
		background-color: #ebf2ff;
		border-radius: 16rpx 16rpx 0px 0px;
	}

	.group_3 {
		padding: 30rpx 22rpx 41rpx 24rpx;
	}

	.group_9 {
		margin-top: 42rpx;

		position: relative;
	}

	.text_2 {
		margin-bottom: 4rpx;
		color: #1d6aff;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.image_1 {
		margin-top: 10rpx;
		width: 30rpx;
		height: 32rpx;
	}

	.group_5 {
		margin-top: 39rpx;
	}

	.image_2 {
		margin-top: 18rpx;
		width: 26rpx;
		height: 16rpx;
	}

	.text_9 {
		margin-left: 12rpx;
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.section_4 {
		padding: 20rpx 39rpx 0;
		background-image: url('https://project-user-resource-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868931139600616.png');
		background-position: 0% 0%;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.section_5 {
		padding: 19rpx 29rpx 27rpx 30rpx;
		border-radius: 4rpx 4rpx 0 0;
		background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/617a2ca7e4f1450011362b37/62b14c62d02982001153329a/16557868004904926678.png');
		background-size: 100% 100%;
		background-repeat: no-repeat;
		position: absolute;
		left: 0;
		right: 0;
		top: 0;
	}

	.section_6 {
		background-color: #d9d9d9;
		width: 1rpx;
		height: 1206rpx;
		position: absolute;
		left: 148rpx;
		top: 0;
	}

	.section_7 {
		background-color: #d9d9d9;
		width: 1rpx;
		height: 1206rpx;
		position: absolute;
		right: 148rpx;
		top: 0;
	}

	.text_3 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_4 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_7 {
		margin-top: 33rpx;
	}

	.group_10 {
		margin-right: 10rpx;
		height: 632rpx;
	}

	.group_15 {
		margin-top: 15rpx;
	}

	.text-wrapper_2 {
		padding: 24rpx 0 32rpx;
		align-self: center;
		background-color: #1d6aff0f;
		width: 356rpx;
	}

	.text-wrapper_5 {
		width: 88rpx;
	}

	.text_5 {
		margin-bottom: 6rpx;
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_6 {
		margin-top: 6rpx;
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_7 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.text_8 {
		color: #1d6aff;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.group_11 {
		margin-top: 95rpx;
	}

	.text_13 {
		margin-top: -123rpx;
	}

	.group_12 {
		margin-top: 36rpx;
	}

	.text_20 {
		margin-top: 19rpx;
	}

	.text_21 {
		margin-top: 3rpx;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_22 {
		margin-right: 10rpx;
		margin-bottom: 3rpx;
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_17 {
		flex: 1 1 auto;
	}

	.text_26 {
		margin: 298rpx 10rpx 0 40rpx;
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_27 {
		margin-left: 20rpx;
		margin-right: 23rpx;
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
	}

	.text_28 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_29 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_30 {
		color: #666666;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
	}

	.text_10 {
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_11 {
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_13 {
		flex: 1 1 auto;
	}

	.text_19 {
		margin-left: 40rpx;
		margin-top: 193rpx;
		color: #1d6aff;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.group_18 {
		align-self: flex-end;
		width: 356rpx;
	}

	.text_25 {
		margin-top: 6rpx;
		align-self: flex-start;
		color: #333333;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_14 {
		font-size: 22rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.group_14 {
		margin-left: 37rpx;
		flex: 1 1 auto;
	}

	.text-wrapper_1 {
		padding: 24rpx 0 44rpx;
		background-color: #1d6aff0f;
	}

	.text_24 {
		margin: 19rpx 23rpx 0 20rpx;
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
	}

	.text_17 {
		margin: 19rpx 23rpx 0 20rpx;
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
	}

	.view_1 {
		margin-top: 30rpx;
	}

	.text_23 {
		margin-left: 20rpx;
		margin-right: 23rpx;
		color: #333333;
		font-size: 22rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 26rpx;
		text-align: left;
	}

	.text_18 {
		margin-left: 20rpx;
		margin-right: 23rpx;
	}
</style>
